<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>无缝滚动2</title>
    <link rel="stylesheet" href="./banner.css" />
    <script src="./animate.js"></script>
  </head>

  <body>
    <div class="banner">
      <!-- 轮播图 -->
      <ul class="imgBox clearFix">
        <li class="slider" style="background-color: red">1</li>
        <li class="slider" style="background-color: orange">2</li>
        <li class="slider" style="background-color: green">3</li>
        <li class="slider" style="background-color: pink">4</li>
        <li class="slider" style="background-color: yellow">5</li>
      </ul>

      <!-- 指示器存放处 -->
      <ol class="pointBox"></ol>

      <div class="leftRightTabs">
        <a class="prev">&lt;</a>
        <a class="next">&gt;</a>
      </div>
    </div>

    <script>
      /* 找出元素 */

      // 轮播图
      var ul = document.querySelector(".imgBox");

      // 上一张 下一张
      var btnPrev = document.querySelector(".prev");
      var btnNext = document.querySelector(".next");

      /* 添加互动 */

      // 上一张
      btnPrev.onclick = function (e) {
        // 让Ul的left样式-600像素
        // ul.style.left = parseFloat(getComputedStyle(ul).left) + 600 + "px";
        animate(
          ul, //想染谁动
          { left: parseFloat(getComputedStyle(ul).left) + 600 + "px" }, //目标状态
          500, //耗时
          // 动画结束回调函数
          function () {
            console.log("动画结束了，callback被回调了");
          }
        );
      };

      // 下一张
      btnNext.onclick = function (e) {
        // 让Ul的left样式-600像素
        // ul.style.left = parseFloat(getComputedStyle(ul).left) - 600  +"px"
        animate(
          ul, //想染谁动
          { left: parseFloat(getComputedStyle(ul).left) - 600 + "px" }, //目标状态
          500, //耗时
          // 动画结束回调函数
          function () {
            console.log("动画结束了，callback被回调了");
          }
        );
      };
    </script>
  </body>
</html>
